@numbers: 5, 10, 15, 20, 25, 30, 35, 40, 100;

div,
p {
  box-sizing: border-box;
}

.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row-center {
  display: flex;
  justify-content: center;
}

.flex-column-center {
  display: flex;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.c-p {
  cursor: pointer;

  &:hover {
    opacity: 0.7;
  }
}

// ant-design-vue 样式重置
.ant-btn-primary {
  background-color: @main-color !important;
  box-shadow: 0 2px 0 @main-color;

  &:hover {
    opacity: 0.7;
    background-color: @main-color !important;
  }

  &.ant-btn-dangerous {
    background-color: #ff4d4f !important;
    box-shadow: 0 2px 0 rgba(255, 38, 5, 0.06) !important;
  }
}

each(@numbers, {
  .p-@{value} {
    padding: @value*1px 
  }

  .pt-@{value} {
    padding-top: @value*1px;
  }
  .pr-@{value} {
    padding-right: @value*1px
  }
  .pb-@{value} {
    padding-bottom: @value*1px 
  }
  .pl-@{value} {
    padding-left: @value*1px
  }

  .m-@{value} {
    margin: @value*1px 
  }

  .mt-@{value} {
    margin-top: @value * 1px;
  }
  .mr-@{value} {
    margin-right: @value * 1px
  }
  .mb-@{value} {
    margin-bottom: @value*1px 
  }
  .ml-@{value} {
    margin-left: @value*1px
  }
});

.no-scroll-bar {
  // 滚动条样式
  &::-webkit-scrollbar {
    width: 2px;
    height: 6px;
  }

  // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  &::-webkit-scrollbar-button {
    display: none;
  }
  // 滚动条的轨道（里面装有Thumb）
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  // 滚动条的轨道（里面装有Thumb）
  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }
  // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  &::-webkit-scrollbar-thumb {
    background: transparent !important;
    cursor: pointer;
    border-radius: 4px;
  }
  // 边角，即两个滚动条的交汇处
  &::-webkit-scrollbar-corner {
    display: none;
  }
  // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  &::-webkit-resizer {
    display: none;
  }
}
